﻿@{
    Layout = "~/Views/Shared/_Style.cshtml";
}
@*layer*@
<link href="~/js/lib/layui/dist/css/layui.css" rel="stylesheet" />
<script src="~/js/lib/jquery/jquery-3.2.1.js"></script>
<script src="~/js/lib/layui/dist/layui.js"></script>
<script src="~/js/content/department/addDepartment.js"></script>
<script src="~/js/content/tool.js"></script>

@*ztree*@
<link href="~/js/lib/ztree/css/demo.css" rel="stylesheet" />
<link href="~/js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/js/ztree/jquery-1.4.4.min.js"></script>
<script src="~/js/ztree/jquery.ztree.core-3.5.js"></script>
<script src="~/js/lib/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增部门表单</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="DepartmentName" lay-verify="yz" autocomplete="off" placeholder="请输入部门名称" class="layui-input">
        </div>
        <br />
        <label class="layui-form-label">部门排序</label>
        <div class="layui-input-block">
            <input type="text" name="Sort" autocomplete="off" placeholder="请输入部门排序号" class="layui-input">
        </div>
        <br />
        <label class="layui-form-label">上级部门</label>
        <div class="layui-input-block">
            <input type="text" name="Pid" autocomplete="off" placeholder="请选择所属父级" class="layui-input" onclick="showDepartment();" readonly="readonly" id="citySel">
            <br />
            <span style="color:red">注：不选择默认为新建部门</span>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0  0 0 40% ">
        <div class="layui-input-block">
            <br />
            <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div id="DepartmentContent" class="DepartmentContent" style="display:none; position: absolute; ">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 200px; background-color:white"></ul>
    <input id="DepartmentId" type="hidden" />
</div>
<SCRIPT type="text/javascript">
		<!--
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick,
            onCheck: onCheck
        }
    };
    var zNodes = [];
    $.ajax({
        type: 'post',
        url: '/Department/GetDepartmentList',
        dataType: 'json',
        success: function (data) {
            for (var i = 0, l = data.data.length; i < l; i++) {
                zNodes.push({ id: data.data[i].id, pId: data.data[i].pid, name: data.data[i].departmentName })
            }
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }
    });
    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        $("#DepartmentId").val(treeNode.id);

    }
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true),
            v = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            v += nodes[i].name + ",";
        }
        if (v.length > 0) v = v.substring(0, v.length - 1);
        var cityObj = $("#citySel");
        cityObj.attr("value", v);
        $("#DepartmentId").val(treeNode.id);
    }
    function showDepartment() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#DepartmentContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#DepartmentContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "DepartmentBtn" || event.target.id == "citySel" || event.target.id == "DepartmentContent" || $(event.target).parents("#DepartmentContent").length > 0)) {
            hideMenu();
        }
    }
</SCRIPT>
